window.onload = function () {
    let sea = document.querySelector('.sea');
    let water = document.querySelector('#water');
    let me = document.querySelector('#me');
    let num = 0;

    let goal = document.querySelector("#goal");

    //通过for循环向HTML中添加图片标签

    //其他随机生成的小蝌蚪
    for (var i = 1; i <= 150; i++) {
        let numT = Math.round((Math.random() + 0.01) * 4900);
        let numL = Math.round((Math.random() + 0.01) * 4900);

        //生成img标签
        let aImg = document.createElement("span");

        //使用拼接的方法给生成的span标签插入图片
        if (i < 100) {
            aImg.style.backgroundImage = "url(./images/xiaokedou2.png)";
        }
        else if (i < 130) {
            aImg.style.backgroundImage = "url(./images/xiaoqingwa.png)";
        }
        else {
            aImg.style.backgroundImage = "url(./images/wugui.png)";
        }


        //将生成的标签插入到它们的父元素中
        water.appendChild(aImg);
        aImg.style.top = numT + 'px';
        aImg.style.left = numL + 'px';
        // console.log(aImg.offsetTop);

        if (i <= 35) {
            animate1(aImg);
        }
        if (i > 35 && i <= 70) {
            animate2(aImg);
        }
        if (i > 70 && i <= 105) {
            animate3(aImg);
        }
        if (i > 105 && i <= 150) {
            animate4(aImg);
        }


        // if (this.offsetLeft >= 4900 || this.offsetTop >= 4900) {
        //     animate2(aImg);
        // }
        // if (this.offsetLeft <= 0 || this.offsetTop <= 0) {
        //     animate1(aImg);
        // }
        // if (this.offsetLeft <= 0 || this.offsetTop >= 4900) {
        //     animate3(aImg);
        // }
        // if (this.offsetLeft >= 4900 || this.offsetTop <= 0) {
        //     animate4(aImg);
        // }

    }

    for (var i = 1; i <= 20; i++) {
        let numT = Math.round((Math.random() + 0.01) * 4900);
        let numL = Math.round((Math.random() + 0.01) * 4900);

        //生成img标签
        let aImg = document.createElement("div");

        //使用拼接的方法给生成的span标签插入图片

        aImg.style.backgroundImage = "url(./images/jinli.png)";


        //将生成的标签插入到它们的父元素中
        water.appendChild(aImg);
        aImg.style.top = numT + 'px';
        aImg.style.left = numL + 'px';
        // console.log(aImg.offsetTop);


        animate2(aImg);

        // if (this.offsetLeft >= 4500 && this.offsetTop >= 4500) {
        //     animate2(aImg);
        // }
        // if (this.offsetLeft <= 200 && this.offsetTop <= 200) {
        //     animate1(aImg);
        // }
        // if (this.offsetLeft <= 200 && this.offsetTop >= 4500) {
        //     animate3(aImg);
        // }
        // if (this.offsetLeft >= 4500 && this.offsetTop <= 200) {
        //     animate4(aImg);
        // }

    }
    // 判断是否相遇
    let spans = document.querySelectorAll('span');
    let divs = water.querySelectorAll('div');
    let isdown = false;

    // 我的小蝌蚪
    window.onmousedown = function () {

        isdown = true;
        document.onmousemove = function (e) {
            var x = e.pageX;
            var y = e.pageY;
            me.style.left = x + 'px';
            me.style.top = y + 'px';
            if (num >= 3) {
                me.style.backgroundImage = "url(./images/xiaoqingwa.png)";
                me.style.height = '100px';
                me.style.width = '80px';
            }
            if (num >= 10) {
                me.style.backgroundImage = "url(./images/wugui.png)";
                me.style.height = '100px';
                me.style.width = '80px';
            }
            if (num >= 30) {
                me.style.backgroundImage = "url(./images/xiaojinyu.png)";
                me.style.height = '100px';
                me.style.width = '80px';
            }
            if (num >= 80) {
                me.style.backgroundImage = "url(./images/jinli.png)";
                me.style.height = '100px';
                me.style.width = '80px';
            }
            if (num >= 150) {
                me.style.backgroundImage = "url(./images/shayu.png)";
                me.style.height = '100px';
                me.style.width = '80px';
            }
            if (num >= 170) {
                me.style.backgroundImage = "url(./images/fendayu.png)";
                alert('恭喜你,你赢了！')
            }
            for (var i = 0; i < spans.length; i++) {
                if (i < 100) {
                    spans[i].onmouseover = function () {
                        if (isdown) {
                            var meLeft = me.offsetLeft;
                            var meTop = me.offsetTop;
                            var taLeft = this.offsetLeft;
                            var taTop = this.offsetTop;
                            if ((meLeft - taLeft <= 15 && meLeft - taLeft >= -15) || (meTop - taTop <= 15 && meTop - taTop >= -15)) {

                                num++;
                                this.style.display = 'none';
                                // console.log(num);
                                goal.innerHTML = '分数:' + num;
                            }
                        }


                    }


                }
                if (i >= 100 && i < 130) {
                    spans[i].onmouseover = function () {
                        if (isdown) {
                            var meLeft = me.offsetLeft;
                            var meTop = me.offsetTop;
                            var taLeft = this.offsetLeft;
                            var taTop = this.offsetTop;
                            if ((meLeft - taLeft <= 15 && meLeft - taLeft >= -15) || (meTop - taTop <= 15 && meTop - taTop >= -15)) {

                                num++;
                                this.style.display = 'none';
                                // console.log(num);
                                goal.innerHTML = '分数:' + num;



                                if (num <= 3) {
                                    alert('您挂了！');
                                }
                                else {

                                    num = num + 3;
                                    this.style.display = 'none';
                                    // console.log(num);
                                    goal.innerHTML = '分数:' + num;
                                }
                            }
                        }
                    }
                }
                if (i >= 130 && i <= 150) {
                    spans[i].onmouseover = function () {
                        if (isdown) {
                            var meLeft = me.offsetLeft;
                            var meTop = me.offsetTop;
                            var taLeft = this.offsetLeft;
                            var taTop = this.offsetTop;
                            if ((meLeft - taLeft <= 15 && meLeft - taLeft >= -15) || (meTop - taTop <= 15 && meTop - taTop >= -15)) {

                                num++;
                                this.style.display = 'none';
                                // console.log(num);
                                goal.innerHTML = '分数:' + num;
                                if (num <= 10) {
                                    alert('您挂了！');
                                }
                                else {

                                    num = num + 10;
                                    this.style.display = 'none';
                                    // console.log(num);
                                    goal.innerHTML = '分数:' + num;
                                }




                            }
                        }



                    }
                }
            }

        };

        for (var i = 1; i < divs.length; i++) {

            divs[i].onmouseover = function () {
                if (isdown) {
                    var meLeft = me.offsetLeft;
                    var meTop = me.offsetTop;
                    var taLeft = this.offsetLeft;
                    var taTop = this.offsetTop;
                    if ((meLeft - taLeft <= 15 && meLeft - taLeft >= -15) || (meTop - taTop <= 15 && meTop - taTop >= -15)) {
                        if (num < 30) {
                            me.style.display = 'none';
                            alert('您挂了！');
                            window.location.reload();
                        }
                        else {
                            num = num + 30;
                            this.style.display = 'none';
                            // console.log(num);
                            goal.innerHTML = '分数:' + num;
                        }
                    }

                }
            }
        }


        // 当鼠标抬起的时候，删除事件
        document.onmouseup = function () {
            document.onmousemove = null;
            isdown = false;
        }



    }


    let o = 1;
    // 封装动画函数，让元素动起来
    // ----------------- 右下方向------------------------------
    function animate1(obj) {
        var timer = setInterval(function () {
            if (obj.offsetLeft >= 4900 || obj.offsetTop >= 4900) {
                // obj.style.left = obj.offsetLeft - 2 + 'px';
                // obj.style.top = obj.offsetTop - 2 + 'px';
                o = -1;
            }
            obj.style.left = obj.offsetLeft + o + 'px';
            obj.style.top = obj.offsetTop + o + 'px';



        }, 40);

    }
    // -----------------左上方向------------------------------

    function animate2(obj) {
        var timer = setInterval(function () {
            if (obj.offsetLeft <= 0 || obj.offsetTop <= 0) {
                // clearInterval(timer);
                // obj.style.left = obj.offsetLeft + 2 + 'px';
                // obj.style.top = obj.offsetTop + 2 + 'px';
                o = -1;
            }

            obj.style.left = obj.offsetLeft - o + 'px';
            obj.style.top = obj.offsetTop - o + 'px';




        }, 40);

    }
    // -----------------右上方向------------------------------

    function animate3(obj) {
        var timer = setInterval(function () {
            if (obj.offsetLeft >= 4900 || obj.offsetTop <= 0) {
                // clearInterval(timer);
                // obj.style.left = obj.offsetLeft - 2 + 'px';
                // obj.style.top = obj.offsetTop + 2 + 'px';
                o = -1;
            }

            obj.style.left = obj.offsetLeft + o + 'px';
            obj.style.top = obj.offsetTop - o + 'px';



        }, 40);

    }
    // -----------------左下方向------------------------------

    function animate4(obj) {
        var timer = setInterval(function () {
            if (obj.offsetLeft <= 0 || obj.offsetTop >= 4900) {
                // clearInterval(timer);
                // obj.style.left = obj.offsetLeft + 2 + 'px';
                // obj.style.top = obj.offsetTop - 2 + 'px';
                o = -1;
            }

            obj.style.left = obj.offsetLeft - o + 'px';
            obj.style.top = obj.offsetTop + o + 'px';



        }, 40);

    }

}
